<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>纯 CSS 实现猫笑起来的动画</title>
    <link rel="stylesheet" href="../css/cat.css">
</head>

<body>
    <div class="container">
        <!-- 脸 -->
        <div class="face">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <!-- <div class="mouth-top"></div> -->
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
    <div class="container">
        <!-- 脸 -->
        <div class="face face1">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <!-- <div class="mouth-top"></div> -->
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap ear-wrap1">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
    <div class="container">
        <!-- 脸 -->
        <div class="face face2">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <!-- <div class="mouth-top"></div> -->
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap ear-wrap2">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
    <div class="container">
        <!-- 脸 -->
        <div class="face face3">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <!-- <div class="mouth-top"></div> -->
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap ear-wrap3">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
    <div class="container">
        <!-- 脸 -->
        <div class="face face4">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <!-- <div class="mouth-top"></div> -->
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap ear-wrap4">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
    <div class="container">
        <!-- 脸 -->
        <div class="face face5">
            <!-- 头发 -->
            <div class="hair">
                <div></div>
            </div>
            <!-- 眼睛 -->
            <div class="eye-wrap">
                <div class="eye left">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
                <div class="eye right">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="face-red"></div>
                </div>
            </div>
            <!-- 鼻子 -->
            <div class="nose">
            </div>
            <!-- 嘴巴 -->
            <div class="mouth-wrap">
                <!-- <div class="mouth-top"></div> -->
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>
        </div>
        <!-- 耳朵 -->
        <div class="ear-wrap ear-wrap5">
            <div class="ear left"> </div>
            <div class="ear right"> </div>
        </div>
    </div>
</body>

</html>